<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<nav>
				<button @click="changeTab(1)">列表1</button>
				<button @click="changeTab(2)">列表2</button>
			</nav>
			<keep-alive>
				<component :is="view"></component>
			</keep-alive>
		</div>
	</body>
</html>

<script type="text/x-template" id="list1">
	<ul>
		<li>列表1内容1</li>
		<li>列表1内容2</li>
		<li>列表1内容3</li>
	</ul>
</script>

<script type="text/x-template" id="list2">
	<ul>
		<li>列表2内容1</li>
		<li>列表2内容2</li>
		<li>列表2内容3</li>
		<li>列表2内容4</li>
		<li>列表2内容5</li>
	</ul>
</script>

<script type="text/javascript">
	// 创建组件list1
	const list1 = {
		template: '#list1',
		created() {
			console.log('加载list1');
		}
	}
	const list2 = {
		template: '#list2',
		created() {
			console.log('加载list2');
		}
	}
	
	new Vue({
		el: '#app',
		data: {
			view: 'list1'
		},
		components: {
			list1,
			list2
		},
		methods: {
			changeTab(index) {
				this.view = index===1?'list1':'list2';
			}
		}
	})
	
	
</script>
